<template>
    <el-drawer v-model="isDrawerVisible" title="订单详情" :with-header="true">
        <el-descriptions
                direction="vertical"
                :column="2"
                border
        >
            <el-descriptions-item label="订单编号">{{ order.dingdan_num }}</el-descriptions-item>
            <el-descriptions-item label="用户姓名">{{ order.name }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ order.phone }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{ order.address }}</el-descriptions-item>
            <el-descriptions-item label="商家名称">{{ order.shop_name }}</el-descriptions-item>
            <el-descriptions-item label="骑手名称">{{ order.rider_name }}</el-descriptions-item>
            <el-descriptions-item label="订单时间">{{ order.time }}</el-descriptions-item>
            <el-descriptions-item label="送达时间">{{ order.end_time }}</el-descriptions-item>
            <el-descriptions-item label="订单金额">{{ order.price }}</el-descriptions-item>
            <el-descriptions-item label="配送费">{{ order.gratuity }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{ formatState(order.state) }}</el-descriptions-item>
            <el-descriptions-item label="备注信息">{{ order.remark }}</el-descriptions-item>
        </el-descriptions>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 控制抽屉显示
const isDrawerVisible = ref(false)

// 订单数据模型
const order = ref({
    address: '',
    dingdan_num: '',
    end_time: '',
    gratuity: 0.0,
    name: '',
    phone: '',
    price: 0.0,
    remark: '',
    rider_name: '',
    shop_name: '',
    state: '',
    time: ''
})

// 格式化订单状态
const formatState = (state: string) => {
    switch (state) {
        case '0': return '待接单'
        case '1': return '商家未接单'
        case '2': return '商家已接单'
        case '3': return '骑手已接单'
        case '4': return '配送中'
        case '5': return '已完成'
        default: return '未知状态'
    }
}

// 接收父组件传入的订单数据
const handleDetailData = (obj: any) => {
    isDrawerVisible.value = true
    order.value = { ...obj }
}

// 暴露方法给父组件
defineExpose({
    handleDetailData
})
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
